<template>
  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <!-- 列表组件 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <!-- 列表项，使用for循环 ,添加点击事件跳转到课程详情页-->
      <van-cell v-for="item in listData" :key="item.id" @click="$router.push(`/course-info/${item.id}`)">
        <!-- 左侧图片，因为两个接口返回数据名字不同，使用｜｜判断取值 -->
        <img :src="item.courseImgUrl || item.image" alt="">
        <!-- 右侧信息 -->
        <div class="r">
          <h3>{{item.courseName || item.name}}</h3>
          <p class="FirstField">{{item.previewFirstField}}</p>
          <!-- 已购课程不返回也不需要展示价格，判断是否有价格字段即可 -->
          <p v-if="item.price">
            <span class="discounts">¥{{item.discounts}}</span>
            <!-- 直接使用删除线 -->
            <s>¥{{item.price}}</s>
          </p>
        </div>
      </van-cell>
    </van-list>
  </van-pull-refresh>
</template>

<script>
export default {
  name: 'courseList',
  // 接收参数
  props: {
    // 接收父组件传递过来的接口
    getData: {
      type: Function, // 类型为函数
      required: true // 必须
    }
  },
  data () {
    return {
      // 信号值 - 标记是否列表加载完毕
      finished: false,
      // 信号值 - 标记列表是否处于刷新状态
      loading: false,
      // 列表数据
      listData: [],
      // 课程查询页码
      currentPage: 1,
      // 信号值 - 下拉刷新
      refreshing: false
    }
  },
  methods: {
    // 下拉刷新函数
    async onRefresh () {
      // 重置页码为 1
      this.currentPage = 1
      // 判断接口名字，如果已购课程接口，列表依旧触底（否则如果数据较少会导致自动触发onLoad）
      this.finished = this.getData.name === 'getPurchaseCourse'
      // 调用父组件传递过来的接口获取数据
      const { data } = await this.getData({
        currentPage: this.currentPage,
        pageSize: 10,
        status: 1
      })
      // 根据请求结果判断当前显示的页面
      if (data.code === '000000' && data.data.records !== 0) {
        // 获取全部课程成功执行
        // 直接替换数据
        this.listData = data.data.records
        // 页数 +1
        this.currentPage++
        // 修改下拉刷新信号值
        this.refreshing = false
        // 弹出提示
        this.$toast('刷新成功')
      } else if (data.content) {
        // 获取已购课程成功
        // 直接替换数据
        this.listData = data.content
        // 页数 +1
        this.currentPage++
        // 修改下拉刷新信号值
        this.refreshing = false
        // 弹出提示
        this.$toast('刷新成功')
      }
    },
    // 列表触底刷新事件，第一次加载的时候就会默认执行一次
    async onLoad () {
      // 调用父组件传递过来的接口获取数据
      const { data } = await this.getData({
        currentPage: this.currentPage,
        pageSize: 10,
        status: 1
      })
      // 根据请求结果判断当前显示的页面
      if (data.code === '000000' && data.data.records !== 0) {
        // 获取课程列表成功
        // 向列表添加数据
        this.listData.push(...data.data.records)
        // 页数 +1
        this.currentPage++
        if (this.listData.length >= data.data.total) {
          // 如果列表长度大于等于总条数，设置触底
          this.finished = true
        }
      } else if (data.content) {
        // 获取已购课程成功
        // 向列表添加数据（其实也可以直接替换，因为这个接口返回的数据不分页）
        this.listData.push(...data.content)
        // 页数 +1
        this.currentPage++
        // 直接设置触底
        this.finished = true
      }
      // 无论如何都要设置加载状态结束
      this.loading = false
    }
  }
}
</script>

<style lang="scss" scoped>
// 列表整体定位
.van-pull-refresh {
  position: fixed;
  left: 0;
  right: 0;
  overflow-y: auto; // 开启Y轴滚动条
  // 单个课程
  .van-cell .van-cell__value {
    display: flex;
    // 清除默认效果
    h3, p {
      margin: 0;
    }
    img {
      height: 100px;
      width: 75px;
      border-radius: 5px;
    }
    .r {
      display: flex;
      flex-direction: column;
      margin-left: 10px;
      .FirstField {
        flex-grow: 1;
      }
      p .discounts {
        margin-right: 10px;
        color: #ff7452;
      }
      p s {
        color: #ccc;
      }
    }
  }
}
</style>
